<script setup lang="ts">
import { ref, computed } from 'vue'
import { NCard, NTag, NSpace, NGradientText } from 'naive-ui'

interface Tutorial {
  id: number
  title: string
  description: string
  category: string
  level: string
  author: string
  date: string
  readTime: string
  tags: string[]
}

// 模拟教程数据
const tutorials = ref<Tutorial[]>([
  {
    id: 1,
    title: '仓颉语言入门指南',
    description: '从零开始学习仓颉语言的基础语法和核心概念，适合编程新手。',
    category: '入门基础',
    level: '初级',
    author: '仓颉团队',
    date: '2024-03-20',
    readTime: '15分钟',
    tags: ['基础语法', '入门']
  },
  {
    id: 2,
    title: '使用仓颉构建命令行工具',
    description: '学习如何使用仓颉语言开发一个实用的命令行工具。',
    category: '实战项目',
    level: '中级',
    author: '社区贡献者',
    date: '2024-03-18',
    readTime: '25分钟',
    tags: ['CLI', '项目实战']
  },
  {
    id: 3,
    title: '仓颉语言的并发编程',
    description: '深入理解仓颉语言的并发特性和最佳实践。',
    category: '高级特性',
    level: '高级',
    author: '仓颉团队',
    date: '2024-03-15',
    readTime: '30分钟',
    tags: ['并发', '高级特性']
  },
  {
    id: 4,
    title: '仓颉标准库详解',
    description: '全面介绍仓颉语言标准库的使用方法和实践技巧。',
    category: '标准库',
    level: '中级',
    author: '仓颉团队',
    date: '2024-03-12',
    readTime: '20分钟',
    tags: ['标准库', 'API']
  }
])

const searchQuery = ref('')
const selectedCategory = ref('')
const selectedLevel = ref('')

const categories = ['入门基础', '实战项目', '高级特性', '标准库']
const levels = ['初级', '中级', '高级']

const filteredTutorials = computed(() => {
  return tutorials.value.filter(tutorial => {
    const matchesSearch = tutorial.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
                         tutorial.description.toLowerCase().includes(searchQuery.value.toLowerCase())
    const matchesCategory = !selectedCategory.value || tutorial.category === selectedCategory.value
    const matchesLevel = !selectedLevel.value || tutorial.level === selectedLevel.value
    return matchesSearch && matchesCategory && matchesLevel
  })
})

const getLevelColor = (level: string) => {
  switch (level) {
    case '初级':
      return { color: '#48bb78', bgColor: 'rgba(72, 187, 120, 0.1)' }
    case '中级':
      return { color: '#ecc94b', bgColor: 'rgba(236, 201, 75, 0.1)' }
    case '高级':
      return { color: '#f56565', bgColor: 'rgba(245, 101, 101, 0.1)' }
    default:
      return { color: '#7b82ff', bgColor: 'rgba(123, 130, 255, 0.1)' }
  }
}
</script>

<template>
  <main class="tutorials-page">
    <section class="tutorials-hero">
      <div class="hero-content">
        <h1>
          <NGradientText :gradient="{ from: '#ffffff', to: '#e0e0e0' }">
            教程中心
          </NGradientText>
        </h1>
        <p class="hero-description">探索仓颉语言的学习资源，从入门到精通</p>
      </div>
    </section>

    <section class="tutorials-content">
      <div class="content-wrapper">
        <div class="filters">
          <div class="search-box">
            <input 
              type="text" 
              v-model="searchQuery"
              placeholder="搜索教程..."
              class="search-input"
            >
          </div>
          <div class="filter-options">
            <select v-model="selectedCategory" class="filter-select">
              <option value="">所有分类</option>
              <option v-for="category in categories" :key="category" :value="category">
                {{ category }}
              </option>
            </select>
            <select v-model="selectedLevel" class="filter-select">
              <option value="">所有难度</option>
              <option v-for="level in levels" :key="level" :value="level">
                {{ level }}
              </option>
            </select>
          </div>
        </div>
        <div class="tutorials-grid">
          <NCard 
            v-for="tutorial in filteredTutorials" 
            :key="tutorial.id" 
            class="tutorial-card"
            :bordered="false"
            :style="{
              background: 'linear-gradient(165deg, rgba(40, 40, 45, 0.8), rgba(25, 25, 30, 0.9))',
              border: '1px solid rgba(123, 130, 255, 0.08)',
              backdropFilter: 'blur(12px)'
            }"
          >
            <div class="tutorial-header">
              <NTag 
                :bordered="false"
                :style="{ 
                  background: getLevelColor(tutorial.level).bgColor,
                  color: getLevelColor(tutorial.level).color,
                  padding: '2px 12px',
                  borderRadius: '12px'
                }"
              >
                {{ tutorial.level }}
              </NTag>
              <NTag 
                :bordered="false"
                :style="{ 
                  background: 'rgba(123, 130, 255, 0.1)',
                  color: '#7b82ff',
                  padding: '2px 12px'
                }"
              >
                {{ tutorial.category }}
              </NTag>
            </div>
            <h3>{{ tutorial.title }}</h3>
            <p class="tutorial-description">{{ tutorial.description }}</p>
            <div class="tutorial-tags">
              <NSpace>
                <NTag 
                  v-for="tag in tutorial.tags"
                  :key="tag"
                  :bordered="false"
                  :style="{ 
                    background: 'rgba(255, 255, 255, 0.05)',
                    color: 'rgba(255, 255, 255, 0.85)'
                  }"
                >
                  {{ tag }}
                </NTag>
              </NSpace>
            </div>
            <div class="tutorial-meta">
              <div class="meta-item">
                <span class="meta-label">作者</span>
                <span>{{ tutorial.author }}</span>
              </div>
              <div class="meta-item">
                <span class="meta-label">时长</span>
                <span>{{ tutorial.readTime }}</span>
              </div>
              <div class="meta-item">
                <span class="meta-label">发布</span>
                <span>{{ new Date(tutorial.date).toLocaleDateString() }}</span>
              </div>
            </div>
          </NCard>
        </div>
      </div>
    </section>
  </main>
</template>

<style scoped>
.tutorials-page {
  width: 100%;
}

.tutorials-hero {
  padding: 8rem 2rem 4rem;
  background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.tutorials-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(123, 130, 255, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.tutorials-hero h1 {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-description {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.tutorials-content {
  padding: 4rem 2rem;
  background-color: #1a1a1a;
  min-height: 60vh;
}

.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.filters {
  margin-bottom: 3rem;
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
}

.search-box {
  flex: 1;
  min-width: 300px;
}

.search-input {
  width: 100%;
  padding: 0.8rem 1.2rem;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #7b82ff;
  background: rgba(255, 255, 255, 0.1);
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.filter-options {
  display: flex;
  gap: 1rem;
}

.filter-select {
  padding: 0.8rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(40, 40, 45, 0.8);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 140px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
  backdrop-filter: blur(12px);
}

.filter-select:hover {
  background-color: rgba(45, 45, 50, 0.9);
  border-color: rgba(123, 130, 255, 0.15);
}

.filter-select:focus {
  outline: none;
  border-color: rgba(123, 130, 255, 0.5);
  background-color: rgba(45, 45, 50, 0.95);
  box-shadow: 0 0 0 3px rgba(123, 130, 255, 0.1);
}

.filter-select option {
  background-color: rgba(35, 35, 40, 0.98) !important;
  color: rgba(255, 255, 255, 0.9);
  padding: 12px 16px;
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
}

.filter-select option:hover,
.filter-select option:focus {
  background: rgba(123, 130, 255, 0.1) !important;
  color: #7b82ff;
}

.filter-select option:checked {
  background: linear-gradient(135deg, rgba(123, 130, 255, 0.15), rgba(123, 130, 255, 0.1)) !important;
  color: #7b82ff;
}

.tutorials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.tutorial-card {
  border-radius: 16px;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tutorial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.tutorial-header {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.tutorial-card h3 {
  font-size: 1.5rem;
  color: #ffffff;
  margin-bottom: 1rem;
  line-height: 1.4;
  font-weight: 600;
}

.tutorial-description {
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.tutorial-tags {
  margin-bottom: 1.5rem;
}

.tutorial-meta {
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.meta-label {
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 768px) {
  .tutorials-hero {
    padding: 6rem 1rem 3rem;
  }

  .tutorials-hero h1 {
    font-size: 2.5rem;
  }

  .hero-description {
    font-size: 1.1rem;
  }

  .tutorials-content {
    padding: 2rem 1rem;
  }

  .filters {
    flex-direction: column;
    gap: 1rem;
  }

  .search-box {
    min-width: 100%;
  }

  .filter-options {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .filter-select {
    width: 100%;
    min-width: 0;
    font-size: 0.9rem;
    padding: 0.7rem 1rem;
    padding-right: 32px;
  }

  .tutorials-grid {
    grid-template-columns: 1fr;
  }

  .tutorial-meta {
    flex-direction: column;
    gap: 0.5rem;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .tutorials-hero h1 {
    font-size: 3rem;
  }

  .tutorials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 美化下拉菜单样式 */
.filter-select {
  padding: 0.8rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(40, 40, 45, 0.8);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 140px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
  backdrop-filter: blur(12px);
}

/* 下拉菜单容器 */
.filter-select::-webkit-calendar-picker-indicator {
  display: none;
}

.filter-select option {
  background-color: rgba(35, 35, 40, 0.98);
  color: rgba(255, 255, 255, 0.9);
  padding: 12px 16px;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  border-radius: 8px;
  margin: 4px;
  cursor: pointer;
}

/* 设置下拉列表样式 */
.filter-select:focus {
  outline: none;
  border-color: rgba(123, 130, 255, 0.5);
  background-color: rgba(45, 45, 50, 0.95);
  box-shadow: 0 0 0 3px rgba(123, 130, 255, 0.1);
}

/* 美化下拉列表 */
select.filter-select:not(:focus):not(:active) option {
  background-color: rgba(35, 35, 40, 0.98);
}

select.filter-select option:checked {
  background: linear-gradient(135deg, rgba(123, 130, 255, 0.15), rgba(123, 130, 255, 0.1));
  color: #7b82ff;
}

select.filter-select option:hover {
  background: rgba(123, 130, 255, 0.1);
}

/* 设置下拉框打开时的样式 */
.filter-select[size]:focus {
  background-color: rgba(45, 45, 50, 0.98);
  border-color: rgba(123, 130, 255, 0.5);
}

/* 自定义滚动条 */
.filter-select::-webkit-scrollbar {
  width: 8px;
}

.filter-select::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.filter-select::-webkit-scrollbar-thumb {
  background: rgba(123, 130, 255, 0.2);
  border-radius: 4px;
}

.filter-select::-webkit-scrollbar-thumb:hover {
  background: rgba(123, 130, 255, 0.3);
}
</style> 